<template>
  <div>
    <div v-for="count in card_num" :key="count">
      <div class="blog_card">
        <div style="display: flex; width: 100%; margin: 14px">
          <span>{{ mybolg_info[count-1].blogTitle }}</span>
          <button style="position: absolute; right: 100px;" @click="tochange(count)">编辑</button>
          <button style="position: absolute; right: 60px;" @click="delete_blog(count)">删除</button>
        </div>
        <div style="display: flex; width: 100%; margin: 14px float: right;">
          <span style="margin-left: 14px">{{ mybolg_info[count-1].bolgNote }}</span>
        </div>
        <div style="display: flex; width: 100%; margin: 14px; margin-top: 26px">
          <span style="font-size: 10px; margin-right: 20px"
            >分类：{{ mybolg_info[count-1].blogSortName }}</span
          ><span>{{ mybolg_info[count-1].pageView }}</span>
        </div>
        <div style="display: flex; width: 100%; margin: 12px">
          <span style="position: absolute; right: 30px"
            >创建时间：{{ mybolg_info[count-1].createTime }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      mybolg_info: [],
      card_num:0,
    };
  },
  mounted: function () {
    this.BlogIfnoByName();
  },
  methods: {
    BlogIfnoByName() {
      axios
        .post("/BlogIfnoByName", {
          user_token: localStorage.getItem("user_Token"),
        })
        .then((response) => {
          for (let i = 0; i < response.data.length; i++) {
            this.mybolg_info.push(response.data[i]);
          }
          this.card_num = response.data.length;
        });
    },
    tochange(count){
      axios.post("/toChange", {blogId:this.mybolg_info[count-1].blogId-0}).then((response)=>{
        this.$router.push({path:"/publish_Article",query:{fabuorxiugai:false,SortName:response.data.SortName,value:response.data.value,BlogTitle:response.data.BlogTitle,blogId:this.mybolg_info[count-1].blogId-0}})
      })

    },
    delete_blog(count){
        axios
        .post("/delete_blog", {
            blogId: this.mybolg_info[count-1].blogId,
        }).then(
            this.BlogIfnoByName()
        )
        this.$message({
          message: '删除成功',
          type: 'success'
        });
    },
  },
};
</script>

<style>
.blog_card {
  display: block;
  background-color: #fff;
  border: #eee dashed 3px;
  height: 150px;
  margin-bottom: 10px;
}
.blog_card:hover {
  border: #eee solid 3px;
}
</style>